<template>
  <div id="introduced" style="overflow: hidden;">

    <!--搜索-->
    <div class="searchWrap">
      <div class="searchCenter">
        <input type="text" :placeholder="searchText" focus>
      </div>
      <span @click="back()">取消</span>
    </div>

    <!--搜索历史-->
    <div class="searchCache">
      <div>
        <p>历史搜索</p>
        <div>
          <span @click="goDetail()">荷去</span><span>荷去</span><span>荷去</span><span>荷去</span><span>荷去</span><span>荷去</span><span>荷去</span>
        </div>
      </div>

      <div class="hide">
        <shopList></shopList>
        <shopList></shopList>
      </div>

      <div class="error hide">
        <img src="../../../../static/images/searchError.png" alt="" mode="aspectFit">
        <p>没有找到合适商品</p>
      </div>

    </div>

    <!--版权-->
    <div class="copyRight">
      <p>找玩网</p>
      <p>五朵云.休闲农旅全场景运营服务商 版权所有</p>
    </div>

  </div>
</template>

<script>
  import shopList from '../../../components/shopList'
  import screen from '../../../components/screen'

  export default {
    data () {
      return {
        'searchText':'搜索商户名称'
      }
    },
    components: {
      shopList,
      screen
    },
    methods: {
      back: function(){
        wx.navigateBack({
          delta: 2
        })
      },
      goDetail: function(){
        wx.navigateTo({
          url: '/pages/index/shopDetail/main'
        })
      }
    },
    computed: {
    },
    created() {
    }
  }
</script>

<style scoped lang=scss>
  #introduced{
    border-top: 1rpx solid #f5f5f5;
    background: #f5f5f5;
  }

  .searchWrap{
    height:95rpx;
    width:100%;
    background:#ffffff;
    margin:0;
    padding-top:15rpx;
    .searchCenter{
      height: 80rpx;
      width: 580rpx;
      margin-left: 45rpx;
      border-radius: 80rpx;
      background: url("../../../../static/images/searchIco.png") no-repeat #ececec;
      background-position: 33rpx 22rpx;
      float: left;
      input{
        height: 80rpx;
        line-height: 80rpx;
        margin-left: 91rpx;
        background: #ececec;
        font-size: 28rpx;
        color: #999999;
        width:440rpx;
        float:left;
      }
    }
    span{
      float: left;
      margin-top: 20rpx;
      margin-left: 25rpx;
      color: #7ae5d0;
      font-size: 32rpx;
    }
  }

  .searchCache{
    background: #ffffff;
    margin-top: 10rpx;
    overflow: hidden;
    padding-bottom: 80rpx;
    p{
      color: #545454;
      font-size: 30rpx;
      margin-top: 30rpx;
      margin-left: 45rpx;
    }
    span{
      float: left;
      display: block;
      width: 120rpx;
      height: 50rpx;
      text-align: center;
      line-height: 50rpx;
      background: #eeeeee;
      font-size: 30rpx;
      color: #838383;
      margin-left: 55rpx;
      margin-top: 30rpx;
      border-radius: 25rpx;
    }
    .hide{
      display: none;
    }

    .error{
      text-align: center;
      img{
        width: 295rpx;
        margin-top: 160rpx;
        height: 370rpx;
      }
      p{
        color: #545454;
        font-size: 30rpx;
        margin-top: 10rpx;
      }
    }
  }


  .copyRight{
    text-align: center;
    font-size: 24rpx;
    color: #999999;
    padding: 35rpx 0;
    background: #ffffff;
    p{
      height: 46rpx;
      line-height: 46rpx;
    }
  }
</style>
